<template>
  <view class="list-container">
    <!-- 空状态 -->
    <view v-if="goodsList.length === 0" class="empty-state">
      <image src="/static/img/empty-box.png" class="empty-img" />
      <text class="empty-text">暂无库存商品</text>
      <button class="add-btn" @click="navToAdd">
        <uni-icons type="plus" size="16" color="white" />
        添加商品
      </button>
    </view>
    
    <!-- 商品列表 -->
    <view v-else class="goods-grid">
      <view 
        v-for="(item, index) in goodsList" 
        :key="index" 
        class="goods-item"
        @click="navToDetail(item._id)">
        <image 
          :src="item.image[0] || '/static/img/default-furniture.jpg'" 
          class="goods-img" 
          mode="aspectFill"
        />
        <view class="goods-info">
          <text class="goods-name">{{ item.name }}</text>
          <text class="goods-price">¥{{ item.price.toLocaleString() }}</text>
          <view class="goods-stock" :class="{ warning: item.stock < 3 }">
            <uni-icons type="shop" size="14" />
            库存: {{ item.stock }}件
          </view>
          <text class="goods-material">{{ item.material }}</text>
        </view>
      </view>
    </view>
    
    <!-- 加载更多 -->
    <uni-load-more :status="loadingStatus" v-if="goodsList.length > 0" />
  </view>
</template>

<script>
const db = uniCloud.database();

export default {
  data() {
    return {
      goodsList: [],
      loadingStatus: 'more',
      currentPage: 1,
      pageSize: 10
    };
  },
  onLoad() {
    this.loadData();
  },
  onReachBottom() {
    if (this.loadingStatus === 'more') {
      this.currentPage++;
      this.loadData();
    }
  },
  onPullDownRefresh() {
    this.currentPage = 1;
    this.goodsList = [];
    this.loadData();
    uni.stopPullDownRefresh();
  },
  methods: {
    async loadData() {
      this.loadingStatus = 'loading';
      
      try {
        const res = await db.collection('furniture_inventory')
          .orderBy('create_date', 'desc')
          .skip((this.currentPage - 1) * this.pageSize)
          .limit(this.pageSize)
          .get();
        
        if (this.currentPage === 1) {
          this.goodsList = res.result.data;
        } else {
          this.goodsList = [...this.goodsList, ...res.result.data];
        }
        
        this.loadingStatus = res.result.data.length < this.pageSize ? 'noMore' : 'more';
      } catch (e) {
        uni.showToast({
          title: '加载失败: ' + e.message,
          icon: 'none'
        });
        this.loadingStatus = 'more';
      }
    },
    
    navToDetail(id) {
      uni.navigateTo({
        url: `/pages/inventory/detail?id=${id}`
      });
    },
    
    navToAdd() {
      uni.navigateTo({
        url: '/pages/inventory/add'
      });
    }
  }
};
</script>

<style lang="scss">
.list-container {
  padding: 20rpx;
  
  .empty-state {
    text-align: center;
    padding: 100rpx 0;
    
    .empty-img {
      width: 200rpx;
      height: 200rpx;
      opacity: 0.6;
      margin-bottom: 30rpx;
    }
    
    .empty-text {
      display: block;
      font-size: 32rpx;
      color: #999;
      margin-bottom: 30rpx;
    }
    
    .add-btn {
      background: #8B4513;
      color: white;
      width: 300rpx;
      margin: 0 auto;
      border-radius: 50rpx;
    }
  }
  
  .goods-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20rpx;
    
    .goods-item {
      background: white;
      border-radius: 16rpx;
      overflow: hidden;
      box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.08);
      
      .goods-img {
        width: 100%;
        height: 300rpx;
        background-color: #f0e6d8;
      }
      
      .goods-info {
        padding: 20rpx;
        
        .goods-name {
          font-size: 28rpx;
          font-weight: 500;
          color: #333;
          display: block;
          margin-bottom: 8rpx;
        }
        
        .goods-price {
          font-size: 32rpx;
          font-weight: bold;
          color: #d42328;
          display: block;
          margin-bottom: 8rpx;
        }
        
        .goods-stock {
          font-size: 24rpx;
          color: #666;
          display: flex;
          align-items: center;
          
          &.warning {
            color: #e6a23c;
            font-weight: bold;
          }
          
          .uni-icons {
            margin-right: 6rpx;
          }
        }
        
        .goods-material {
          font-size: 24rpx;
          color: #8B4513;
          display: block;
          margin-top: 8rpx;
        }
      }
    }
  }
}
</style>